<template>
	<view class="container">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="skip" @tap="skip">
			<u-icon name="arrow-right-double"></u-icon>
			跳过
		</view>
		<view class="column">
			<text>专家名称</text>
			<input type="text" placeholder="请输入专家名称" v-model="name" />
		</view>
		<view class="column">
			<text>联系方式</text>
			<input type="number" placeholder="请输入电话号码" v-model="contact" />
		</view>
		<view class="column">
			<text>专家姓名</text>
			<input type="text" placeholder="请输入姓名" v-model="leaderName" />
		</view>
		<view class="column">
			<text>地址</text>
			<input type="text" placeholder="请输入地址" v-model="address" />
		</view>
		<view class="uUpload" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="uUpload">
			<u-icon v-if="!bannerUrl" name="photo" size="60"></u-icon>
			<text v-if="!bannerUrl" style="margin-top: 30rpx">点击上传身份证正面</text>
			<view class="banner" v-if="bannerUrl"><ImageLoad :src="bannerUrl" borderRadius="10" /></view>
		</view>
		<view class="uUpload" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="uUploadQualification">
			<u-icon v-if="!qualificationUrl" name="photo" size="60"></u-icon>
			<text v-if="!qualificationUrl" style="margin-top: 30rpx">点击上传资质认证图片</text>
			<view class="banner" v-if="qualificationUrl"><ImageLoad :src="qualificationUrl" borderRadius="10" /></view>
		</view>
		<view class="column">选择经营范围:</view>
		<view class="select" v-for="(column, index) in items" :key="index">
			<u-tag style="margin-bottom: 10px" :text="column.title" type="warning" />
			<view class="select-item">
				<u-checkbox-group>
					<u-checkbox v-model="item.checked" active-color="#FED46B" v-for="(item, itemIndex) in column.item" :key="itemIndex" :name="item.name">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="select">
			<u-tag style="margin-bottom: 10px" text="自定义标签" type="warning" />
			<input type="text" placeholder="请输入标签" v-model="other" />
		</view>
		<view class="add" @tap="add" hover-class="touch" hover-start-time="0" hover-stay-time="300">提交</view>
	</view>
</template>

<script>
import Vue from 'vue'
export default {
	data() {
		return {
			bannerUrl: '',
			qualificationUrl: '',
			name: '',
			address: '',
			contact: '',
			leaderName: '',
			other: '',
			items: [
				{
					title: '亲子活动',
					item: [],
				},
				{
					title: '幼儿课程',
					item: [],
				},
				{
					title: '家长课程',
					item: [],
				},
				{
					title: '其他课程',
					item: [],
				},
			],
		}
	},
	onLoad() {
		const items = [
			['手工', '阅读', '陶艺', '农耕体验', '烘焙', '插花', '运动', '游泳', '公益', '瑜伽', '绘画'],
			[
				'思维',
				'阅读',
				'识字',
				'国学',
				'拼音',
				'围棋',
				'幼儿英语',
				'魔方',
				'科学',
				'主持',
				'专注力',
				'记忆力',
				'情绪管理',
				'数独',
				'钢琴',
				'古筝',
				'笛子',
				'琵琶',
				'二胡',
				'吉他',
				'绘画',
				'诗词',
				'书法',
				'武术',
				'跆拳道',
				'篮球',
				'戏剧',
				'机器人',
				'游泳',
			],
			['育儿', '亲子关系', '亲子沟通', '心理培训'],
			['专家课程', '职业培训'],
		]
		items.map((item, index) => {
			item.map((item) => {
				this.items[index].item.push({
					name: item,
					checked: false,
				})
			})
		})
	},
	methods: {
		uUpload: async function () {
			const data = await this.chooseImage()
			this.bannerUrl = data
		},
		uUploadQualification: async function () {
			const data = await this.chooseImage()
			this.qualificationUrl = data
		},
		skip: function () {
			this.$Router.pushTab({ name: 'topic' })
		},
		add: function () {
			if (!this.name) {
				this.$refs.uTips.show({
					title: '请输入专家名称',
					type: 'warning',
					duration: '2000',
				})
				return
			}
			if (!this.contact) {
				this.$refs.uTips.show({
					title: '请输入电话号码',
					type: 'warning',
					duration: '2000',
				})
				return
			}
			if (!this.leaderName) {
				this.$refs.uTips.show({
					title: '请输入姓名',
					type: 'warning',
					duration: '2000',
				})
				return
			}
			if (!this.address) {
				this.$refs.uTips.show({
					title: '请输入地址',
					type: 'warning',
					duration: '2000',
				})
				return
			}
			if (!this.bannerUrl) {
				this.$refs.uTips.show({
					title: '请上传身份证照片',
					type: 'warning',
					duration: '2000',
				})
				return
			}
			if (!this.qualificationUrl) {
				this.$refs.uTips.show({
					title: '请上传资质认证图片',
					type: 'warning',
					duration: '2000',
				})
				return
			}
			const tags = []
			if (this.other) tags.push(this.other)
			this.items.map((column) => {
				column.item.map((item) => {
					if (item.checked) tags.push(item.name)
				})
			})
			const json = {
				deviceUuid: this.deviceUuid,
				type: 'expert',
				name: this.name,
				address: this.address,
				contact: this.contact,
				leaderName: this.leaderName,
				leaderIdCardUrl: this.bannerUrl,
				qualificationUrl: this.qualificationUrl,
				tags,
			}
			this.$post(this.api.applyAdd, json)
				.then((res) => {
					if (res.error && res.error === 'invalidAddress') {
						this.$refs.uTips.show({
							title: '地址无法定位，请重新输入',
							type: 'warning',
							duration: '1000',
						})
						return
					}
					this.$refs.uTips.show({
						title: '提交成功，请等待审核',
						type: 'success',
						duration: '1000',
					})
					setTimeout(() => {
						this.$Router.pushTab({ name: 'topic' })
					}, 1200)
				})
				.catch(() => {
					this.$refs.uTips.show({
						title: '网络异常',
						type: 'warning',
						duration: '2000',
					})
				})
		},
	},
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	min-height 100vh
	background #FFFBF3
	display flex
	flex-direction column
	align-items center
	padding 50rpx
	position relative

	.skip
		font-size 35rpx
		position absolute
		right 0
		top 20rpx
		color #FF9C15
		display flex
		align-items center
		justify-content center
		width 200rpx
		height 70rpx

	.column
		width 650rpx
		height 100rpx
		border-bottom 2rpx solid #FAF6EE
		display flex
		justify-content space-between
		align-items center
		font-size 30rpx

	.select
		width 650rpx
		border-bottom 2rpx solid #FAF6EE
		display flex
		flex-direction column
		padding 20rpx 0

		.select-title
			font-size 25rpx

	.uUpload
		width 400rpx
		height 200rpx
		margin-left -250rpx
		background #FDF6EC
		margin-top 20rpx
		border-radius 10rpx
		display flex
		flex-direction column
		justify-content center
		align-items center
		color #FF9900
		transition all 0.3s
		border 1px solid #FAECD8

		.banner
			position relative
			width 100%
			height 100%
			overflow hidden
			transform translate3d(0, 0, 0)

	.add
		width 300rpx
		height 90rpx
		line-height 90rpx
		text-align center
		border-radius 50rpx
		background #fed46b
		color #fff
		font-size 40rpx
		margin 40rpx 0
		transition all 0.3s

	.footer
		width 100vw
		display flex
		flex-direction column
		align-items center
		justify-content center
		font-size 30rpx
		padding 30rpx

		text
			margin-bottom 20rpx
</style>
